<template>
	<view class="home">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="main">
			<view class="top headline">
				<uni-icons type="arrowleft" size="24" class="left" color="#999" @click="commonality.back()" />
				<text class="title">{{titleName}}</text>
				<view class="msg" @click="go_mestitleNamesage()">
					<image src="/static/img/information_3.png" />
					<text v-if="news_l">{{ news_l }}</text>
				</view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
				<view
					class="scroll-view-item_H"
					v-for="(item, index) in activeList"
					:key="index"
					:class="{ active: index == active }"
					@click="clickactive(index)"
					v-show="item.actName"
				>
					{{ item.actName }}
				</view>
			</scroll-view>
			<view class="find_input">
				<view @click="go_goodsearch">
					<image src="/static/img/find_1.png" />
					输入关键字搜索海量商品
				</view>
			</view>
			<!-- <view class="banner" v-if="banner[0]">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500" :circular="true" style="height: 375rpx;">
					<swiper-item v-for="(items, index) in banner" :key="index"><image style="width: 100%;height: 365rpx;" :src="items.image" /></swiper-item>
					
				</swiper>
			</view> -->
			<view class="notice">
				<view class="icon"><image src="/static/img/information_2.png" /></view>
				<view class="nr">
					<swiper class="swiper" :vertical="true" :autoplay="true" :interval="5000" :duration="500" :circular="true" style="height: 80rpx;">
						<swiper-item v-for="(items, index) in noticeList" :key="index" @click="notice(items.id)">{{ items.title }}</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="product-list">
				<view class="title">
					<image src="/static/img/hot_1.png" /> 
					热销商品
					<text class="more right" @click="go_commodity()" v-if="commodity.length!==0">更多>></text>
				</view>
				<view class="list">

					<!-- <view class="commodity" v-for="item in commodity" :key="item.value" @click="go_goodDetails(item.goodsId)"> -->

					<view class="commodity" v-for="item in commodity" :key="item.value" @click="go_goodDetails(item)">

						<image :src="imgCDNUrl + item.image" class="picture" mode="aspectFill" />
						<p class="name">{{ item.goodsName }}</p>
						<view class="price">
							￥{{ item.marketPrice }}
							<!-- <image src="/static/img/car_1.png" class="shopping" /> -->
						</view>
					</view>
				</view>
				<view v-if="commodity.length==0" class="notavailable">
					<image src="../../static/img/notavailable.png" mode="widthFix"></image>
					<view class="nottext">暂时没有数据</view>
					<view class="skip">
						<text @click="go()">返回上一页</text>
						
					</view>
				</view>
			</view>
			<view class="go-top" v-show="is_go_top" @click="backTop"><image src="/static/img/go_top.png" /></view>
		</view>
	</view>
</template>
<script>
// import TabMenu from '@/components/TabMenu.vue'
import { uniIcons } from '@dcloudio/uni-ui';
import flsubsite from '../../servers/shop/flsubsite.js';
import dateFormat from '../../common/dateFormat.js';
export default {
	components: { uniIcons },
	data() {
		return {
			id: null,
			login:'',
			value: '',
			news_l: 0,
			is_go_top: false,
			paging: 'index',
			titleName:'',
			flag: 3,
			zone: 4,
			noticeFlag: 2,
			banner: [],
			noticeList: [],
			commodity: [],
			activeList: [],
			active: ''
		};
	},
	onPageScroll: function(e) {
		//nvue暂不支持滚动监听，可用bindingx代替
		if (e.scrollTop > 200) {
			this.is_go_top = true;
		} else {
			this.is_go_top = false;
		}
	},
	onShow: function(e) {
		uni.removeStorageSync('actId');
	},
	onUnload: function(e) {
		uni.removeStorageSync('actId');
		
	},
	onLoad(option) {

		this.titleName =this.commonality.route_get('titleName', this.$route);
		this.partitionId=this.commonality.route_get('partitionId', this.$route);
		console.log(this.titleName);
		console.log(this.partitionId)
		this.login = uni.getStorageSync('login');
		if (this.login) {
			this.getDate();
		} else {
			var _this = this;
			uni.showModal({
				title: '提示',
				content: '登录以后才能查看活动',
				confirmText: '去登录',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/shop/account/login'
						});
					} else if (res.cancel) {
						_this.commonality.back();
					}
				}
			});
		}
	
	},
	methods: {
		go(){
			uni.switchTab({
				url: '/pages/shop/index'
			});
		},
		getDate() {
		
			var noticeObj = { isNewsEunm: this.noticeFlag };
			flsubsite
				.news(noticeObj)
				.then(res => {
					this.noticeList = res.data.records.map(v => {
						v.image = this.imgCDNUrl + v.bannerImg;
						return v;
					});
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
				var client=1
				//ifndef APP-PLUS
					var client=2
				//endif
				console.log(client)
			flsubsite
				.activity({partitionId:this.partitionId,client:client})
				.then(res => {
					this.activeList=res.data.data.records
					this.clickactive(0);
				
				})
				.catch(err => {
					console.log(err)
					console.log(new Error('请检查网络后重试'));
				});
		},
		go_goodDetails(e) {
			this.commonality.route_balings('/pages/shop/commodity/particulars',['actId','shopId','actType'],[this.activeList[this.active].id,e.id,this.activeList[this.active].actType.value])

			// if(this.activeList[this.active].actType.value === 1){
			// 	this.commonality.route_balings('/pages/agent/placeorder/particulars',['actId','shopId'], [this.activeList[this.active].id,e.id]);
			// }else{
			// 	this.commonality.route_balings('/pages/shop/commodity/particulars',['actId','shopId','actType'],[this.activeList[this.active].id,e.id,this.activeList[this.active].actType.value])
				
			// }

		},
		
		//公告跳转页面
		notice(e) {
			this.commonality.route_baling('/pages/shop/news/msg', 'msg_id', e);
		},
		go_commodity(e) {
			var actId=this.activeList[this.active].id;
			var titleName=this.activeList[this.active].actName;
			var actType=this.activeList[this.active].actType.value;
			this.commonality.route_balings('/pages/shop/commodity/list', ['actId','titleName','actType'], [actId,titleName,actType]);
		/* 	uni.navigateTo({
				url:'/pages/shop/commodity/list?actId='+this.activeList[this.active].id
			}) */
			// this.commonality.route_baling('/pages/shop/commodity/list', 'actId', this.activeList[this.active].id);
		},
		// 计算距离顶部的高度，均分10等分，
		backTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 200
			});
		},
		clickactive(e) {
			if(this.active===e){
				return
			}
			this.active = e;
			var da = {
				actId: this.activeList[e].id,
				sort: 1
			
			};
			flsubsite
				.actgoods(da)
				.then(res => {
					this.commodity = res.data.records.map(v => {
						v.image = v.goodsImg;
						return v;
					});
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		scroll(e) {
			console.log(e);
			// this.old.scrollTop = e.detail.scrollTop;
		},
		
		go_message() {
			uni.navigateTo({
				url: '/pages/shop/news/msglist'
			});
		},
		go_goodsearch() {
			this.commonality.route_baling('/pages/shop/commodity/find','actId',this.activeList[this.active].id)
		}
	}
};
</script>
<style lang="less" scoped>
	.skip {
		text {
			display: inline-block;
			width: 250rpx;
			line-height: 74rpx;
			border: 1px solid #bd3c8c; /*no*/
			color: #bd3c8c;
			border-radius: 10rpx;
			margin: 80rpx 29rpx 109rpx;
		}
	}
.home {
	.main {
		.top {
			background: #fff;
			height: 44px;
			.left {
				position: absolute;
				top: 0;
				left: 0rpx;
				display: block;
				width: 43px;
				height: 43px;
				line-height: 43px;
				text-align: center;
				font-size: 40px;
			}
			.msg {
				position: absolute;
				top: 0px;
				right: 0px;
				height: 44px;
				image {
					width: 24px;
					height: 24px;
					padding: 10px 10px 0;
				}
				text {
					position: absolute;
					top: 5px;
					right: 6px;
					width: 15px;
					height: 15px;
					border-radius: 50%;
					text-align: center;
					line-height: 15px;
					background: #ff2100;
					font-size: 12px;
					color: #fff;
				}
			}
		}
		.scroll-view_H {
			background: #fff;
			white-space: nowrap;
			width: 100%;
			line-height: 80rpx;
			border-bottom: 1px solid #e1e1e1;
			.scroll-view-item_H {
				display: inline-block;
				min-width: 100rpx;
				padding: 0 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
			}
			.scroll-view-item_H.active {
				position: relative;
				color: #bd3c8c;
			}
			.scroll-view-item_H.active:before {
				content: '';
				position: absolute;
				bottom: 5rpx;
				left: 50%;
				display: block;
				width: 100rpx;
				height: 2px;
				background: #bd3c8c;
				transform: translate(-50%, 0);
			}
		}
		.find_input {
			background: #fff;
			padding: 24rpx 0;
			view {
				font-size: 26rpx;
				border-radius: 70rpx;
				line-height: 70rpx;
				background: #f0f0f0;
				overflow: hidden;
				margin: 0 17rpx;
				text-align: center;
				color: #999999;
				image {
					width: 27rpx;
					height: 27rpx;
					position: relative;
					top: 4rpx;
				}
			}
		}
		.notice {
			display: flex;
			background: #fff;
			margin-bottom: 26rpx;
			.icon {
				margin: 0 15rpx 0 18rpx;
				image {
					width: 39rpx;
					height: 35rpx;
					position: relative;
					top: 18rpx;
				}
			}
			.nr {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 24rpx;
				overflow: hidden;
			}
		}
		.menu-bar {
			overflow: hidden;
			background: #fff;
			padding: 5rpx 20rpx 57rpx;
			margin-bottom: 26rpx;
			view {
				width: 47%;
				float: left;
				margin: 49rpx 0 0 1%;
				border-radius: 20rpx;
				height: 182rpx;
				position: relative;
				image {
					position: absolute;
					width: 83rpx;
					height: 83rpx;
					top: 43rpx;
					left: 30rpx;
				}
				view {
					position: absolute;
					top: 58rpx;
					left: 137rpx;
					margin-top: 0;
					color: #fff;
					font-size: 32rpx;
					text {
						display: block;
						margin-top: 22rpx;
						font-size: 24rpx;
					}
				}
			}
			view:nth-child(2n) {
				margin-left: 4%;
			}
			view:nth-child(1) {
				background: linear-gradient(#fe8967, #f7a199);
			}
			view:nth-child(2) {
				background: linear-gradient(#ff96b9, #f26192);
			}
			view:nth-child(3) {
				background: linear-gradient(#c64ede, #d090dd);
			}
			view:nth-child(4) {
				background: linear-gradient(#f3cd67, #fdc01a);
			}
		}
		.product-list {
			background: #fff;
			padding: 14rpx 20rpx;
			margin-bottom: 26rpx;
			.title {
				line-height: 100rpx;
				font-size: 30rpx;
				image {
					position: relative;
					width: 34rpx;
					height: 34rpx;
					top: 7rpx;
				}
				.more {
					color: #999999;
					font-size: 26rpx;
				}
			}
			.list {
				padding: 10rpx;
				overflow: hidden;
				.commodity {
					width: 47%;
					float: left;
					overflow: hidden;
					box-shadow: 1rpx 2rpx 20rpx rgba(197, 197, 197, 0.35);
					border-radius: 20rpx;
					margin-bottom: 30rpx;
					.picture {
						width: 100%;
						height: 300rpx;
					}
					.name {
						padding: 0 16rpx;
						height: 78rpx;
						font-size: 26rpx;
						margin-top: 20rpx;
						line-height: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
					.price {
						padding: 0 16rpx;
						font-size: 32rpx;
						color: #bd3c8c;
						line-height: 86rpx;
						.shopping {
							position: relative;
							width: 44rpx;
							height: 40rpx;
							float: right;
							top: 18rpx;
						}
					}
				}
				.commodity:nth-child(2n) {
					margin-left: 6%;
				}
			}
		}
	}
}
</style>
